<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <style>
      .ancestors * {
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
      }
    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        var $current = $('span').closest('span')
        console.log($current)
        $current.css({ color: 'red', border: '2px solid red' })
      })
      /*
      说明：
      在这个例子中, $("span").closest("span") 指我们查找一个span元素中的第一个span祖先。
      由于方法从当前元素开始，它将返回一个span，假如我们用parents() 方法替代，它将没有东西返回，因为span的父元素是li。
      */
    </script>
  </head>

  <body class="ancestors">
    body (曾曾祖先节点)
    <div style="width: 500px">
      div (曾祖先节点)
      <ul>
        ul (祖先节点)
        <li>
          li (直接父节点)
          <span>span</span>
        </li>
      </ul>
    </div>
  </body>
</html>
